<template>
  <!-- 产品分类导航 -->
  <view class="wrap">
    <view class="menu-category-box u-m-b-10 u-flex u-col-center" style="height:140rpx;">
        <view class="menu-swiper-item" v-for="(itemList, index) in newList" :key="index">
          <view class="menu-tab-box u-flex u-flex-wrap">
            <view
                class="tab-list u-flex-col u-col-center u-row-center"
                :style="{ width: (100 / 5) -2+ '%' }"
                v-for="(item, index) in itemList"
                :key="index"
                @click="$Router.push({ path: '/pages/index/huixuan_good', query: { id: item.id ,title:item.name} })"
            >
              <image class="tab-img" :src="item.image"></image>
              <text class="">{{ item.name }}</text>
            </view>
          </view>
        </view>
        <view class="openclassify" @click="openmask()" v-if="list.length >= oneRowNum">
         <text>展 开</text> <u-icon size="22" name="arrow-down-fill"></u-icon>
        </view>
      </view>
    <u-popup mode="top" :border-radius="20" v-model="isshowall">
      <view class="menu-category-boxs menu-category-boxs_pop u-m-b-20" v-for="(item_content,index) in content" :key="index">
        <view class="titles">
<!--          {{item_content.name}}-->
          <view class="titles_des">
            全部分类
          </view>
          <view class="openclassify" @click="isshowall=!isshowall">
            <text>收 起</text> <u-icon size="22" name="arrow-down-fill"></u-icon>
          </view>
        </view>
        <view class="menu-tab-box u-flex u-flex-wrap">
          <view
              class="tab-list u-flex-col u-col-center u-row-center"
              :style="{ width: 100 / 5 + '%' }"
              v-for="(item, index) in  list"
              :key="index"
              @click="$Router.push({ path: '/pages/index/huixuan_good', query: { id: item.id ,title:item.name} })"
          >
            <image class="tab-img" :src="item.image"></image>
            <text class="">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
/**
 * shGridSwiper-滑动宫格列表
 * @property {Array} list - 列表数据
 * @property {Number|String} oneRowNum - 单行数量
 */
export default {
  components: {},
  data() {
    return {
      categoryCurrent: 0 ,//分类轮播下标
      isshowall:false, //判断展开是否点击
      "content": [
        {
          "name": "吃喝玩乐",
          "style": 4,
          "list": []
        }
      ],
    };
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    oneRowNum: {
      type: [Number, String],
      default: 5
    }
  },
  computed: {
    newList() {
      if (this.list.length) {
        let list = JSON.parse(JSON.stringify(this.list))
        let data = this.$tools.splitData(list, this.oneRowNum * 2);
        return data;
      }
    }
  },
  methods: {
    jump(path, query) {
      this.$Router.push({
        path: path,
        query: query
      });
    },
    openmask(){
      this.isshowall=!this.isshowall;
      console.log('=====type',this.list)
    }
  }
};
</script>

<style lang="scss">
// 产品分类
.menu-category-box,
.menu-swiper-box {
  position: relative;
  background: #fff;
  .menu-swiper-item {
    background: linear-gradient(180deg, #FAEAEA 0%, #FFFFFF 100%);
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .menu-tab-box {
    .tab-list {
      font-size: 26rpx;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      margin: 20rpx 0;
      .tab-img {
        width: 72rpx;
        height: 72rpx;
        margin-bottom: 6rpx;
      }
      text{
        font-size: 24rpx;
        color: #666666;
      }
    }
  }

  .menu-category-dots {
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10rpx;

    .category-dot {
      width: 12rpx;
      height: 12rpx;
      background: #eeeeee;
      border-radius: 50%;
      margin-right: 10rpx;
    }

    .category-dot-active {
      width: 12rpx;
      height: 12rpx;
      background: #e9b461;
      border-radius: 50%;
      margin-right: 10rpx;
    }
  }
}
.menu-category-box .openclassify{
  position: absolute;
  right: 22rpx;
  top: 16rpx;
  display: flex;
  font-size: 24rpx;
  margin-top: 22rpx;
  font-weight: 600;
  writing-mode: vertical-lr;
}
.wrap{
  position: relative;
}

/deep/.uni-scroll-view,/deep/.u-drawer__scroll-view{
background:linear-gradient(180deg, #FAEAEA 0%, #FFFFFF 100%);
  min-height: 200rpx;
  padding-top: 20rpx;
}
// 产品分类
.menu-category-boxs{
  position: relative;
  background: transparent;
  .titles{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0.1rpx solid transparent;
    .titles_des{
      font-size: 28rpx;
      font-weight: 600;
      margin-left: 20rpx;
    }
    .openclassify{
      display: flex;
      margin-right: 20rpx;
      font-size: 24rpx;
      margin-top: 22rpx;
      font-weight: 600;
      writing-mode: vertical-lr;
    }
  }
  .menu-tab-box {
    .tab-list {
      font-size: 26rpx;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      margin: 20rpx 0;
      .tab-img {
        width: 72rpx;
        height: 72rpx;
        margin-bottom: 6rpx;
      }
      text{
        font-size: 24rpx;
        color: #666666;
      }
    }
  }

  .menu-category-dots {
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10rpx;

    .category-dot {
      width: 12rpx;
      height: 12rpx;
      background: #eeeeee;
      border-radius: 50%;
      margin-right: 10rpx;
    }

    .category-dot-active {
      width: 12rpx;
      height: 12rpx;
      background: #e9b461;
      border-radius: 50%;
      margin-right: 10rpx;
    }
  }
}
.menu-category-boxs_pop{
  margin-top: 120rpx !important;
  padding-top: 58rpx!important;
  background:linear-gradient(180deg, #FAEAEA 0%, #FFFFFF 100%);
}
</style>
